<!--
	NOTES:
	1. All tokens are represented by '$' sign in the template.
	2. You can write your code only wherever mentioned.
	3. "DO NOT" alter the tokens in the template html as they are required during publishing.
-->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>test document label </title>
<!-- write your code here -->
<style>

	html,body,canvas,div,input,img{
		margin: 0 auto;
		padding: 0;
	}
	html,body{
		width:100%;
		height: 100%;
		background-color:#ffffff;
	}
	html,body,#canvasContainer{
		overflow: hidden;
		-ms-overflow:hidden;
	}
	#canvas{
		width: auto;
		height: 100%;
		display: block;
		background-color:#ffffff;
		position: absolute;
		/*margin-left: 391px;
        left: 50%;*/
	}
	/*input{
		border: none;
		background: transparent;
		font-family: '微软雅黑';
		color: #FFFFFF;
		visibility: hidden;
	}
	input:focus{
		outline: none;
	}*/
</style>

<script src="../../lib/createjs-2015.11.26.min.js"></script>
<script src="../../jpang.js?1519456601173"></script>
<script src="index.js?1519456601173"></script>

<script>
	/*var style = document.getElementsByTagName('style')[0];
	console.log(style);
	style.className = 'input';*/
var canvas, stage, exportRoot;

    function init() {
        canvas = document.getElementById("canvas");
		var loader = new createjs.LoadQueue(false);
		loader.addEventListener("fileload", handleFileLoad);
		loader.addEventListener("complete", handleComplete);
		loader.loadManifest(lib.properties.manifest);
    }

    function handleFileLoad(evt) {
        if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
    }

    function handleComplete(evt) {
        exportRoot = new lib.index();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);

        //高100%适应，宽auto适应，左右补出血位
        var canvasContainer = document.getElementById("canvasContainer");
        canvas.style.height = document.body.clientHeight + 'px';
        canvasContainer.style.height = document.body.clientHeight + 'px';
        canvas.style.marginLeft = "-" + 783 * (document.body.clientHeight / 1050) / 2 + "px";
        canvas.style.left = "50%";
        /*
		//宽100%适应，高auto适应，上下补出血位
		var canvasContainer = document.getElementById("canvasContainer");
		canvasContainer.style.height = document.body.clientHeight+'px';
		canvas.style.marginTop = "-"+ 1050*(document.body.clientWidth/783)/2 + "px";
		canvas.style.top = "50%";*/

        // --- write your JS code here ---
        exportRoot = new lib.index();
        exportRoot.visible = false;

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        //	console.log(exportRoot.txt.font.split("px "),exportRoot.txt.color);
        var input2 = new P.InputText(exportRoot.txt3, canvas, {
            type: "text", placeholder: 'input content',
            native: {
                maxlength: 11,
                onkeyup: "this.value=this.value.replace(/[^0-9]/g,'')",
                onafterpaste: "this.value=this.value.replace(/[^0-9]/g,'')"
            }
        });
        input2.show();

        //	console.log(exportRoot.txt.font.split("px "),exportRoot.txt.color);
        var input = new P.InputText(exportRoot.txt, canvas, {
            type: "text", placeholder: 'input content',
            native: {
                maxlength: 11,
                onkeyup: "this.value=this.value.replace(/[^0-9]/g,'')",
                onafterpaste: "this.value=this.value.replace(/[^0-9]/g,'')"
            }
        });
        //input.doc.style.textAlign = "center";
        input.show();

        var textarea = new P.Textarea(exportRoot.txt2, canvas, {height: 191, placeholder: 'textarea content'});
        textarea.show();
        //    console.log(canvas.width,'  ',canvas.height);
//		console.log(exportRoot.qr.getChildAt(0).image.src);
        var qr = new P.QRcode(exportRoot.qr, canvas, {src: 'images/p3_13.jpg?1519628898610'});
        qr.show();

        //    alert(JSON.stringify(canvas.getBoundingClientRect()));
        exportRoot.visible = true;
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);

        /*var HEIGHT = document.body.clientHeight;
		var bigbox = document.getElementById("container");
		window.onresize = function(evt) {
			//获取当前focus元素
			var focusedElement = document.activeElement;
			var rt = focusedElement.getBoundingClientRect();
			bigbox.style.height = window.innerHeight+"px";
			bigbox.style.bottom = rt.bottom +"px";
			if(window.innerHeight==HEIGHT){
				focusedElement.blur();
				bigbox.style.bottom = 0;
			}
		};*/

        var cav = document.createElement("canvas");
        cav.width = 783;
        cav.height = 1050;
        var s = new createjs.Stage(cav);
        s.y = -122;
        s.addChild(exportRoot);
        s.update();

        var i = canvas.toDataURL('image/jpeg', 0.9);
        var img = document.createElement('img');
        img.src = i;
        img.style.position = "absolute";
        img.style.width = '100%';
        img.style.height = "100%";
        img.style.zIndex = 9;
        img.style.opacity = 0;
        canvas.parentNode.insertBefore(img, canvas.parentNode.firstChild);
        var rect = canvas.getBoundingClientRect();
        var hf = rect.height / canvas.height, wf = rect.width / canvas.width;
        img.style.top = (0 * hf) + rect.top + 'px';
        img.style.height = 1050 * hf + 'px';
        canvas.parentNode.insertBefore(img, canvas.parentNode.firstChild);
        /*var downTime;
        img.addEventListener("touchstart", function (evt) {
            downTime = new Date().getTime();
        }, false);
        img.addEventListener("touchend", function (evt) {
            var t = new Date().getTime();
            if ((t - downTime) >= 400) {
//                input.value = '长按了';
                alert(556)
            }
        });*/


        var downTime;
        document.body.addEventListener("touchstart", function (evt) {
            input.value ='';
            downTime = setTimeout(function () {
                input.value = '长按了';
                var focusedElement = document.activeElement;
                console.log(createjs.Elements);
            },500);
        }, false);
        document.body.addEventListener("touchmove", function () {
            clearTimeout(downTime);
        },false);
        document.body.addEventListener("touchend", function (evt) {
            clearTimeout(downTime);
        },false);


        stage.addChild(exportRoot);
    }
</script>

<!-- write your code here -->

</head>
<body onload="init();">
	<div id="container" style="height:100%;width:100%;position:absolute;bottom: 0px;">
		<!--<input type="text" id="txtName" placeholder="Name" />
		<input type="text" id="txtPhone" placeholder="Phone" maxlength=11 onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"/>-->
		<div id="canvasContainer" style="width:100%;position:absolute;">
			<canvas id="canvas" width="783" height="1050"></canvas>
		</div>
	</div>
</body>
</html>
